
import "../css/swiper.min.css"
import "../css/animate.min.css"
import "../css/index2.css"

//Swiper的引入
import * as Swiper from "../js/swiper.js";
//WOW引入
import { WOW } from "../js/wow.js";
//引入swiper-animate插件，让swiper上的内容跳动出现
//直接require引入会报错，要先安装这个插件
//安装命令为 npm i -D swiper-animate-cn
require("swiper-animate-cn");
//记得在需要swiper-animate的页面定义如下变量
var swiperAnimateCache = require("swiper-animate-cn").swiperAnimateCache;
var swiperAnimate = require("swiper-animate-cn").swiperAnimate;
var clearSwiperAnimate = require("swiper-animate-cn").clearSwiperAnimate;
//整合用到的所有js
import {
    getIndexLife
} from "./request.js";

let imgs = document.querySelectorAll("img")

//图片添加类名进行懒加载
imgs.forEach(item => {
    item.classList.add("lazy-img")
})

import {
    lazyLoad
} from "../utils/lazyLoad.js";
window.onload = async function () {
    let resLife = await getIndexLife();
    let res = resLife.results
    let address = [];
    //拿到每个图片的地址
    res.forEach((item)=>{
        address.push(item.photo_detail.url)
    })
    //将每张图片地址给到每个img
    imgs.forEach((item,index)=>{
        item.setAttribute("data-src",address[index])
    })


    //懒加载
    lazyLoad(".lazy-img");
};

//设置轮播图
var mySwiper = new Swiper('.swiper-container', {
    //轮播图方向
    direction: "horizontal",
    //分页器
    pagination: {
        el: ".swiper-pagination",
        clickable: true
    },
    // 自动播放
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        init: function () {
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function () {
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
    }
})
//wow
new WOW().init()

let anli = document.querySelectorAll("ol>li>img")

//设置案例图片的动态效果
anli.forEach(item=>{
    item.addEventListener("mousemove",()=>{
        item.classList.add("move")
    })
    item.addEventListener("mouseout",()=>{
        item.classList.remove("move")
    })
})